<template>
  <view class="check_content">
    <view class="check_item" v-for="(item, index) in optionList" :key="index">
      <view class="check_icon" @click="changeItem(item,index)">
        <img
          v-if="isRadio && selectedIndex === index"
          class="icon_img"
          src="https://100000063-1252208446.file.myqcloud.com/images/问卷调查/check.png "
        />
        <img
          v-else
          class="icon_img"
          src="https://100000063-1252208446.file.myqcloud.com/images/问卷调查/check_def.png"
        />
      </view>
      <view class="check_text"> {{ item.option }}</view>
    </view>
  </view>
</template>
    
    <script>
export default {
  props: {
    optionList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isRadio: false, //选项状态
      selectedIndex: -1, // 当前选中的选项索引
    };
  },
  mounted() {
    console.log(this.optionList, "optionListoptionList");
  },
  methods: {
    changeItem(item,index) {
      this.selectedIndex = index;
      this.isRadio = true; // 确保单选按钮显示选中状态
      this.$emit("radioChange", item);
    },
    // 清楚
    clear() {
      this.isRadio = false;
    },
  },
};
</script>
    
  <style lang="less">
.check_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .check_item {
    display: flex;
    width: 302rpx;
    margin: 0 50rpx 24rpx 0;
    .check_icon {
      width: 24rx;
      height: 40rpx;
      display: flex;
      align-items: center;
      margin-right: 24rpx;
      .icon_img {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  :nth-child(even) {
    margin-right: 0;
  }
}
</style>